<template>
  <div class="judgment">
    <!-- 页面头部区域 -->
    <div class="judgment-header">
      <div class="header-content">
        <div class="ancient-title">地府审判系统</div>
        <div class="header-subtitle">阴曹地府 · 十殿阎王审判中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚔️</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">待审案件</div>
              <div class="stat-value">{{ judgmentStats.pendingCases }}</div>
              <div class="stat-label">排队等候</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <BankOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日审判</div>
              <div class="stat-value">{{ judgmentStats.todayJudgments }}</div>
              <div class="stat-label">案件完成</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card punishment-stat">
            <div class="stat-icon">
              <ThunderboltOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">执行刑罚</div>
              <div class="stat-value">{{ judgmentStats.punishments }}</div>
              <div class="stat-label">正在执行</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card appeal-stat">
            <div class="stat-icon">
              <FileTextOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">申诉案件</div>
              <div class="stat-value">{{ judgmentStats.appeals }}</div>
              <div class="stat-label">待复议</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 左侧主要内容 -->
        <a-col :xs="24" :lg="15">
          <div class="main-panel">
            <!-- 功能模块入口 -->
            <div class="section-wrapper">
              <div class="section-header">
                <h3 class="section-title">
                  <AppstoreOutlined class="section-icon" />
                  核心功能模块
                </h3>
              </div>

              <div class="module-grid">
                <div class="module-card" @click="$router.push('/judgment/pending-cases')">
                  <div class="module-icon">
                    <ClockCircleOutlined />
                  </div>
                  <div class="module-content">
                    <div class="module-title">待审案件管理</div>
                    <div class="module-description">新增死者队列、案件优先级排序、审判时间安排、证据材料收集</div>
                    <div class="module-stats">
                      <span>待审: {{ judgmentStats.pendingCases }}</span>
                      <span>今日新增: {{ judgmentStats.todayNew }}</span>
                    </div>
                  </div>
                </div>

                <div class="module-card" @click="$router.push('/judgment/process')">
                  <div class="module-icon">
                    <SettingOutlined />
                  </div>
                  <div class="module-content">
                    <div class="module-title">审判流程管理</div>
                    <div class="module-description">十殿阎王分工、审判程序设置、判决结果记录、申诉复议处理</div>
                    <div class="module-stats">
                      <span>在线阎王: {{ judgmentStats.onlineJudges }}</span>
                      <span>审判中: {{ judgmentStats.inProgress }}</span>
                    </div>
                  </div>
                </div>

                <div class="module-card" @click="$router.push('/judgment/punishment')">
                  <div class="module-icon">
                    <ThunderboltOutlined />
                  </div>
                  <div class="module-content">
                    <div class="module-title">刑罚执行系统</div>
                    <div class="module-description">刑罚类型管理、执行进度跟踪、刑期减免规则、特赦申请处理</div>
                    <div class="module-stats">
                      <span>执行中: {{ judgmentStats.punishments }}</span>
                      <span>特赦申请: {{ judgmentStats.pardons }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 紧急案件处理 -->
            <div class="section-wrapper">
              <div class="section-header">
                <h3 class="section-title">
                  <ExclamationCircleOutlined class="section-icon" />
                  紧急案件处理
                </h3>
                <a-button type="link" class="section-action">查看全部</a-button>
              </div>

              <div class="urgent-cases">
                <div v-for="case_ in urgentCases" :key="case_.id" class="case-item urgent">
                  <div class="case-avatar">
                    <a-avatar :style="{ backgroundColor: getCasePriorityColor(case_.priority) }" size="large">
                      <ExclamationCircleOutlined />
                    </a-avatar>
                  </div>
                  <div class="case-content">
                    <div class="case-header">
                      <span class="case-title">{{ case_.title }}</span>
                      <a-tag :color="getCasePriorityColor(case_.priority)" size="small">{{ case_.priority }}</a-tag>
                    </div>
                    <div class="case-description">{{ case_.description }}</div>
                    <div class="case-meta">
                      <span class="case-deadline">预计审判: {{ case_.scheduledTime }}</span>
                      <a-button type="text" size="small" @click="handleCase(case_)" class="case-action"> 立即审判 </a-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 审判流水线状态 -->
            <div class="section-wrapper">
              <div class="section-header">
                <h3 class="section-title">
                  <BankOutlined class="section-icon" />
                  十殿阎王审判状态
                </h3>
              </div>

              <div class="judge-pipeline">
                <div v-for="court in courts" :key="court.id" class="court-status">
                  <div class="court-header">
                    <div class="court-name">{{ court.name }}</div>
                    <div class="court-judge">{{ court.judge }}</div>
                    <a-badge :status="court.status" />
                  </div>
                  <div class="court-stats">
                    <div class="stat-item">
                      <span class="stat-label">今日审判:</span>
                      <span class="stat-value">{{ court.todayCount }}</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-label">队列等待:</span>
                      <span class="stat-value">{{ court.queueCount }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 右侧侧边栏 -->
        <a-col :xs="24" :lg="9">
          <div class="sidebar-panel">
            <!-- 今日审判安排 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <CalendarOutlined class="section-icon" />
                  今日审判安排
                </h3>
              </div>

              <div class="schedule-list">
                <div v-for="schedule in todaySchedule" :key="schedule.id" class="schedule-item">
                  <div class="schedule-time">{{ schedule.time }}</div>
                  <div class="schedule-info">
                    <div class="schedule-case">{{ schedule.caseName }}</div>
                    <div class="schedule-court">{{ schedule.court }}</div>
                  </div>
                  <div class="schedule-status" :class="schedule.status">
                    {{ schedule.statusText }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 刑罚执行监控 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <ThunderboltOutlined class="section-icon" />
                  刑罚执行监控
                </h3>
              </div>

              <div class="punishment-monitor">
                <div v-for="punishment in punishmentList" :key="punishment.id" class="punishment-item">
                  <div class="punishment-type">{{ punishment.type }}</div>
                  <div class="punishment-progress">
                    <div class="progress-info">
                      <span>{{ punishment.name }}</span>
                      <span>{{ punishment.progress }}%</span>
                    </div>
                    <div class="progress-bar">
                      <div class="progress-fill" :style="{ width: punishment.progress + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 审判统计概览 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <BarChartOutlined class="section-icon" />
                  审判统计概览
                </h3>
              </div>

              <div class="judgment-overview">
                <div class="overview-item">
                  <div class="overview-label">今日审判完成率</div>
                  <div class="overview-value">{{ judgmentStats.completionRate }}%</div>
                </div>
                <div class="overview-item">
                  <div class="overview-label">平均审判时长</div>
                  <div class="overview-value">{{ judgmentStats.avgDuration }}分钟</div>
                </div>
                <div class="overview-item">
                  <div class="overview-label">申诉成功率</div>
                  <div class="overview-value">{{ judgmentStats.appealSuccessRate }}%</div>
                </div>
                <div class="overview-item">
                  <div class="overview-label">刑罚执行率</div>
                  <div class="overview-value">{{ judgmentStats.punishmentRate }}%</div>
                </div>
              </div>
            </div>

            <!-- 最新公告 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <SoundOutlined class="section-icon" />
                  审判公告
                </h3>
              </div>

              <div class="announcements">
                <div v-for="announcement in announcements" :key="announcement.id" class="announcement-item">
                  <div class="announcement-title">{{ announcement.title }}</div>
                  <div class="announcement-time">{{ announcement.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { BankOutlined, ClockCircleOutlined, ThunderboltOutlined, FileTextOutlined, AppstoreOutlined, SettingOutlined, ExclamationCircleOutlined, CalendarOutlined, BarChartOutlined, SoundOutlined } from '@ant-design/icons-vue'

// 路由
const router = useRouter()

// 响应式数据
const loading = ref(false)

// 审判统计数据
const judgmentStats = ref({
  pendingCases: 156,
  todayJudgments: 23,
  punishments: 45,
  appeals: 8,
  todayNew: 12,
  onlineJudges: 8,
  inProgress: 15,
  pardons: 3,
  completionRate: 87.5,
  avgDuration: 25,
  appealSuccessRate: 12.5,
  punishmentRate: 94.2
})

// 紧急案件列表
const urgentCases = ref([
  {
    id: 1,
    title: '张三恶意杀人案',
    description: '生前故意杀害三人，罪大恶极，需紧急审判',
    priority: '紧急',
    scheduledTime: '今日 14:00'
  },
  {
    id: 2,
    title: '李四贪污受贿案',
    description: '官员贪污巨额款项，影响恶劣',
    priority: '高',
    scheduledTime: '今日 15:30'
  },
  {
    id: 3,
    title: '王五意外死亡案',
    description: '车祸意外死亡，需审查是否有业力因素',
    priority: '中',
    scheduledTime: '明日 09:00'
  }
])

// 十殿阎王审判状态
const courts = ref([
  { id: 1, name: '一殿', judge: '秦广王', status: 'processing', todayCount: 8, queueCount: 12 },
  { id: 2, name: '二殿', judge: '楚江王', status: 'warning', todayCount: 5, queueCount: 20 },
  { id: 3, name: '三殿', judge: '宋帝王', status: 'success', todayCount: 15, queueCount: 8 },
  { id: 4, name: '四殿', judge: '伍官王', status: 'processing', todayCount: 10, queueCount: 15 },
  { id: 5, name: '五殿', judge: '阎罗王', status: 'processing', todayCount: 12, queueCount: 18 },
  { id: 6, name: '六殿', judge: '卞城王', status: 'default', todayCount: 0, queueCount: 25 }
])

// 今日审判安排
const todaySchedule = ref([
  { id: 1, time: '09:00', caseName: '张三案', court: '一殿秦广王', status: 'completed', statusText: '已完成' },
  { id: 2, time: '10:30', caseName: '李四案', court: '二殿楚江王', status: 'in-progress', statusText: '审判中' },
  { id: 3, time: '14:00', caseName: '王五案', court: '三殿宋帝王', status: 'pending', statusText: '等待中' },
  { id: 4, time: '16:00', caseName: '赵六案', court: '五殿阎罗王', status: 'scheduled', statusText: '已安排' }
])

// 刑罚执行监控
const punishmentList = ref([
  { id: 1, type: '地狱刑', name: '张三', progress: 25 },
  { id: 2, type: '苦役刑', name: '李四', progress: 78 },
  { id: 3, type: '净化刑', name: '王五', progress: 45 },
  { id: 4, type: '禁锢刑', name: '赵六', progress: 90 }
])

// 审判公告
const announcements = ref([
  { id: 1, title: '新版审判流程规范发布', time: '2小时前' },
  { id: 2, title: '十殿阎王值班时间调整通知', time: '5小时前' },
  { id: 3, title: '刑罚减免条例更新', time: '1天前' },
  { id: 4, title: '申诉复议新规定实施', time: '2天前' }
])

// 方法
const getCasePriorityColor = (priority) => {
  const colors = {
    紧急: '#ff4d4f',
    高: '#fa541c',
    中: '#fa8c16',
    低: '#52c41a'
  }
  return colors[priority] || '#666'
}

const handleCase = (case_) => {
  // 处理案件
  router.push('/judgment/pending-cases')
}

// 生命周期
onMounted(() => {
  loading.value = false
})
</script>

<style lang="scss" scoped>
.judgment {
  padding: 0;

  // 页面头部
  .judgment-header {
    text-align: center;
    margin-bottom: 48px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 48px;

    .stats-grid {
      .stat-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 24px;
        height: 120px;
        display: flex;
        align-items: center;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, transparent, currentColor, transparent);
          opacity: 0.6;
        }

        &.pending-stat {
          color: #fa541c;
          border-color: rgba(245, 84, 28, 0.2);
        }

        &.judgment-stat {
          color: $primary-color;
          border-color: rgba(114, 46, 209, 0.2);
        }

        &.punishment-stat {
          color: #ff4d4f;
          border-color: rgba(255, 77, 79, 0.2);
        }

        &.appeal-stat {
          color: #1890ff;
          border-color: rgba(24, 144, 255, 0.2);
        }

        .stat-icon {
          font-size: 36px;
          margin-right: 20px;
          opacity: 0.8;
        }

        .stat-content {
          flex: 1;

          .stat-title {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 8px;
            font-weight: 500;
          }

          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: currentColor;
            margin-bottom: 4px;
            line-height: 1;
          }

          .stat-label {
            font-size: 12px;
            color: $text-tertiary;
          }
        }
      }
    }
  }

  // 主要内容区域
  .main-content {
    .content-grid {
      align-items: flex-start;
    }

    .main-panel,
    .sidebar-panel {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    // 通用区域样式
    .section-wrapper {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 24px;
      backdrop-filter: blur(10px);

      &.compact {
        padding: 20px;
      }

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .section-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: $text-primary;
          margin: 0;

          .section-icon {
            font-size: 20px;
            margin-right: 12px;
            color: $primary-color;
          }
        }

        .section-action {
          color: $primary-color;
          padding: 0;
          height: auto;
          font-size: 14px;
        }
      }
    }

    // 功能模块网格
    .module-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;

      .module-card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: flex-start;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(114, 46, 209, 0.1);
          border-color: $primary-color;
          transform: translateY(-2px);
        }

        .module-icon {
          font-size: 32px;
          color: $primary-color;
          margin-right: 20px;
          flex-shrink: 0;
          margin-top: 4px;
        }

        .module-content {
          flex: 1;

          .module-title {
            font-size: 18px;
            font-weight: 600;
            color: $text-primary;
            margin-bottom: 8px;
          }

          .module-description {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 12px;
            line-height: 1.5;
          }

          .module-stats {
            display: flex;
            gap: 16px;

            span {
              font-size: 12px;
              color: $text-tertiary;
              background: rgba(255, 255, 255, 0.1);
              padding: 4px 8px;
              border-radius: 4px;
            }
          }
        }
      }
    }

    // 紧急案件样式
    .urgent-cases {
      .case-item {
        display: flex;
        align-items: flex-start;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .case-avatar {
          margin-right: 16px;
          flex-shrink: 0;
        }

        .case-content {
          flex: 1;
          min-width: 0;

          .case-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;

            .case-title {
              font-size: 16px;
              font-weight: 500;
              color: $text-primary;
            }
          }

          .case-description {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 12px;
            line-height: 1.4;
          }

          .case-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .case-deadline {
              font-size: 12px;
              color: $text-tertiary;
            }

            .case-action {
              color: $primary-color;
              padding: 0;
              height: auto;
            }
          }
        }
      }
    }

    // 法院状态样式
    .judge-pipeline {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;

      .court-status {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;

        .court-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;

          .court-name {
            font-size: 14px;
            font-weight: 600;
            color: $text-primary;
          }

          .court-judge {
            font-size: 12px;
            color: $text-secondary;
            flex: 1;
          }
        }

        .court-stats {
          .stat-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            font-size: 12px;

            &:last-child {
              margin-bottom: 0;
            }

            .stat-label {
              color: $text-secondary;
            }

            .stat-value {
              color: $text-primary;
              font-weight: 500;
            }
          }
        }
      }
    }

    // 右侧边栏样式
    .schedule-list {
      .schedule-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .schedule-time {
          font-size: 12px;
          color: $text-secondary;
          width: 50px;
          flex-shrink: 0;
        }

        .schedule-info {
          flex: 1;
          margin: 0 12px;

          .schedule-case {
            font-size: 14px;
            color: $text-primary;
            margin-bottom: 2px;
          }

          .schedule-court {
            font-size: 12px;
            color: $text-tertiary;
          }
        }

        .schedule-status {
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 3px;
          flex-shrink: 0;

          &.completed {
            background: rgba(82, 196, 26, 0.2);
            color: #52c41a;
          }

          &.in-progress {
            background: rgba(24, 144, 255, 0.2);
            color: #1890ff;
          }

          &.pending {
            background: rgba(245, 84, 28, 0.2);
            color: #fa541c;
          }

          &.scheduled {
            background: rgba(255, 255, 255, 0.1);
            color: $text-tertiary;
          }
        }
      }
    }

    .punishment-monitor {
      .punishment-item {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .punishment-type {
          font-size: 12px;
          color: $text-secondary;
          margin-bottom: 6px;
        }

        .punishment-progress {
          .progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            font-size: 13px;

            span:first-child {
              color: $text-primary;
            }

            span:last-child {
              color: $text-secondary;
            }
          }

          .progress-bar {
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            overflow: hidden;

            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, $primary-color, $secondary-color);
              border-radius: 2px;
              transition: width 0.3s ease;
            }
          }
        }
      }
    }

    .judgment-overview {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;

      .overview-item {
        text-align: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;

        .overview-label {
          font-size: 12px;
          color: $text-secondary;
          margin-bottom: 6px;
        }

        .overview-value {
          font-size: 16px;
          font-weight: 600;
          color: $text-primary;
        }
      }
    }

    .announcements {
      .announcement-item {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .announcement-title {
          font-size: 14px;
          color: $text-primary;
          margin-bottom: 4px;
          line-height: 1.4;
        }

        .announcement-time {
          font-size: 12px;
          color: $text-tertiary;
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .judgment {
    .stats-section .stats-grid {
      .stat-card {
        height: 100px;
        padding: 20px;

        .stat-icon {
          font-size: 28px;
          margin-right: 16px;
        }

        .stat-content .stat-value {
          font-size: 24px;
        }
      }
    }

    .main-content {
      .main-panel,
      .sidebar-panel {
        gap: 24px;
      }

      .judge-pipeline {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
}

@media (max-width: 768px) {
  .judgment {
    .judgment-header {
      margin-bottom: 32px;

      .header-content .ancient-title {
        font-size: 24px;
      }
    }

    .stats-section {
      margin-bottom: 32px;

      .stats-grid {
        .stat-card {
          height: 80px;
          padding: 16px;

          .stat-icon {
            font-size: 24px;
            margin-right: 12px;
          }

          .stat-content {
            .stat-value {
              font-size: 20px;
            }

            .stat-title {
              font-size: 12px;
            }
          }
        }
      }
    }

    .main-content {
      .content-grid {
        gap: 24px;
      }

      .section-wrapper {
        padding: 20px;
      }

      .judge-pipeline {
        grid-template-columns: 1fr;
      }

      .judgment-overview {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
